<template>
  <!-- 根元素 -->
  <div>
    <!-- 标题 -->
    <div style="float:left;display: flex;align-items: center;flex-wrap: wrap;">
      <i class="el-icon-menu" style="font-size:30px;padding-right:10px;color:#666666"></i>
      <span style="color:#666666">员工管理</span>
    </div>
    <!-- 分割线 -->
    <div style="display:block;padding:20px"></div>
    <hr align="center" width="95%" color="#c4c4c4" size="1" />

    <!-- 查看添加搜索员工切换 -->
    <div class="staff_button" style="float:left;margin:40px 0;width:1102px">
      <div style="float:left;width:500px">
        <el-button type="success" @click="selectTotal" style="margin-right:50px;margin-left:10px">查看员工</el-button>
        <el-button type="primary" @click="add" style="margin-right:50px">添加员工</el-button>
        <el-button type="info" @click="clickSearchButton">搜索员工</el-button>
      </div>
      <!-- 打开搜索侧拉框的动画 -->
      <transition name="el-zoom-in-center">
        <div v-show="showSearch" class="transition-box">
          <!-- 搜索侧拉框  -->
          <div style="float:right;width:550px">
            <el-input placeholder="请输入员工工号" v-model.number="searchEmployeeNum" @keyup.enter.native="select"
              class="input-with-select">
              <el-button slot="append" icon="el-icon-search" @click="select"></el-button>
            </el-input>
          </div>
        </div>
      </transition>
    </div>
    <!-- 分割线 -->
    <hr align="center" width="95%" color="#409EFF" size="3" />
    <div style="display:block;padding:15px"></div>

    <!-- 主体显示内容：员工列表#渲染基本信息 -->
    <transition name="el-zoom-in-top">
      <div style="width=2000px !important" v-show="bodyChange == 1">
        <template>
          <div style="height:380px">
            <el-table :data="tableData" style="width: 95%"
              :header-cell-style="{ background: '#909399', color: '#fff' }">
              <el-table-column prop="employee_num" label="工号" align="center" width="70">
              </el-table-column>
              <el-table-column prop="employee_name" label="姓名" align="center" width="70">
              </el-table-column>
              <el-table-column prop="employee_idcard" label="身份证" align="center" width="210">
              </el-table-column>
              <el-table-column prop="employee_rfid" label="RFID卡号" align="center" width="220">
              </el-table-column>
              <el-table-column prop="employee_tel" label="联系电话" align="center" width="110">
              </el-table-column>
              <el-table-column prop="employee_status" label="在职状态" align="center">
                <template slot-scope="scope">
                  <div slot="reference" class="name-wrapper">
                    {{ scope.row.employee_status == 1 ? "在职" : "离职" }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="操作等级" align="center">
                <template slot-scope="scope">
                  <div slot="reference" class="name-wrapper">
                    {{ scope.row.employee_level == 1 ? "收银员" : "管理员" }}
                  </div>
                </template>
              </el-table-column>

              <el-table-column label="操作" align="center" width="210">
                <template slot-scope="scope">
                  <el-button @click="handleEdit(scope.$index, scope.row)" size="small" type="danger" plain :disabled="
                      staffData[scope.$index].employee_lock == 1 ? true : false
                    ">修改</el-button>
                  <!-- disabled按钮是否可用，默认true不可用 为true时不可用==employee_lock为1时锁定 -->
                  <el-button @click="handleSelet(scope.$index, scope.row)" size="small" type="success" plain :disabled="
                      staffData[scope.$index].employee_lock == 1 ? true : false
                    ">查看</el-button>
                  <el-button @click="handleLock(scope.$index, scope.row)" size="small" type="warning" plain>锁定
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- pagination分页 -->
          <div class="tablePagination" style="text-align: center">
            <el-pagination @current-change="pageChange" :current-page="currentPage" layout="prev, pager, next"
              :total="total" :page-size="pageSize">
            </el-pagination>
          </div>
        </template>
      </div>
    </transition>

    <!-- 搜索表单，可以修改 -->
    <transition name="el-zoom-in-bottom">
      <div style="width:1102px;height:450px" v-show="bodyChange == 0">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="200px" class="demo-ruleForm"
          :disabled="ruleForm.employee_lock == 1 ? true : false">
          <el-col :span="10">
            <el-form-item label="员工姓名" prop="employee_name">
              <el-input v-model="ruleForm.employee_name" placeholder="请输入员工姓名" clearable></el-input>
            </el-form-item>
            <el-form-item label="员工工号" prop="employee_num">
              <el-input v-model.number="ruleForm.employee_num" placeholder="请输入员工工号" :disabled="true" clearable>
              </el-input>
            </el-form-item>
            <el-form-item label="密码" prop="employee_pwd">
              <el-input v-model="ruleForm.employee_pwd" show-password clearable placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item label="员工电话" prop="employee_tel">
              <el-input v-model.number="ruleForm.employee_tel" placeholder="请输入员工电话" clearable></el-input>
            </el-form-item>
            <el-form-item label="身份证" prop="employee_idcard">
              <el-input v-model="ruleForm.employee_idcard" placeholder="请输入身份证" clearable></el-input>
            </el-form-item>
            <el-form-item label="RFID卡号" prop="employee_rfid">
              <el-input v-model="ruleForm.employee_rfid" placeholder="请输入RFID卡号" clearable></el-input>
            </el-form-item>
            <el-form-item id="radioSex" label="性别" prop="employee_sex">
              <el-radio-group v-model.number="ruleForm.employee_sex" style="width:100%">
                <el-radio :label="1">男</el-radio>
                <el-radio :label="0">女</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="出生日期" required>
              <el-form-item prop="employee_birth">
                <el-date-picker type="date" placeholder="选择出生日期" v-model="ruleForm.employee_birth"
                  value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-form-item>
            <el-form-item label="入职日期" required>
              <el-form-item prop="employee_entry">
                <el-date-picker type="date" placeholder="选择入职日期" v-model="ruleForm.employee_entry"
                  value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-form-item>
            <el-form-item label="在职状态" prop="employee_status">
              <el-select v-model.number="ruleForm.employee_status" placeholder="选择在职状态" style="width: 100%;">
                <el-option label="在职" :value="1"></el-option>
                <el-option label="离职" :value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="操作等级" prop="employee_level">
              <el-select v-model.number="ruleForm.employee_level" placeholder="选择操作等级" style="width: 100%;">
                <el-option label="收营员" :value="1"></el-option>
                <el-option label="管理员" :value="99"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="锁定状态" prop="employee_lock">
              <el-select v-model.number="ruleForm.employee_lock" placeholder="选择锁定状态" style="width: 100%;">
                <el-option label="锁定" :value="1"></el-option>
                <el-option label="解锁" :value="0"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="上传照片">
              <!-- <div style="text-align: left;"> -->
              <el-button plain disabled id="buttonUploadPhotos"></el-button>
              <!-- element 上传图片组件 -->

              <!-- </div> -->
            </el-form-item>
          </el-col>
        </el-form>
        <el-col :span="10">
          <el-button style="width:256px;margin-left:200px" :disabled="ruleForm.employee_lock == 1 ? true : false"
            type="danger" @click="submitSearchForm('ruleForm')">修改</el-button>
        </el-col>
        <el-col :span="10">
          <el-button style="width:256px;margin-left:200px" type="warning" @click="searchFormLockStatus">锁定</el-button>
        </el-col>
      </div>
    </transition>
    <!-- 修改/查看/添加的对话框-form表单 -->
    <!-- Form模板 -->
    <el-dialog :visible.sync="dialogFormVisibleEdit" custom-class="way" :close-on-click-modal="false">
      <template slot="title">
        <div style="font-size:20px;text-align:left;margin-left:60px;font-weight:bold">
          {{ dialogFormTitle }}
        </div>
        <el-divider id="dividerDialog"></el-divider>
      </template>
      <div style="margin:0 150px 0 40px;">
        <!-- disabled 设置为 true禁用该表单内的所有组件 -->
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="200px" class="demo-ruleForm"
          :disabled="formStatus">
          <el-form-item label="员工姓名" prop="employee_name">
            <el-input v-model="ruleForm.employee_name" placeholder="请输入员工姓名" clearable></el-input>
          </el-form-item>
          <el-form-item label="员工工号" prop="employee_num">
            <el-input v-model.number="ruleForm.employee_num" placeholder="请输入员工工号" :disabled="employeeNumStatus"
              clearable></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="employee_pwd">
            <el-input v-model="ruleForm.employee_pwd" show-password clearable placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item label="员工电话" prop="employee_tel">
            <el-input v-model.number="ruleForm.employee_tel" placeholder="请输入员工电话" clearable></el-input>
          </el-form-item>
          <el-form-item label="身份证" prop="employee_idcard">
            <el-input v-model="ruleForm.employee_idcard" placeholder="请输入身份证" clearable></el-input>
          </el-form-item>
          <el-form-item label="RFID卡号" prop="employee_rfid">
            <el-input v-model="ruleForm.employee_rfid" placeholder="请输入RFID卡号" clearable></el-input>
          </el-form-item>
          <el-form-item id="radioSex" label="性别" prop="employee_sex">
            <el-radio-group v-model.number="ruleForm.employee_sex" style="width:100%">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="0">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="出生日期" required>
            <el-form-item prop="employee_birth">
              <el-date-picker type="date" placeholder="选择出生日期" v-model="ruleForm.employee_birth"
                value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-form-item>
          <el-form-item label="入职日期" required>
            <el-form-item prop="employee_entry">
              <el-date-picker type="date" placeholder="选择入职日期" v-model="ruleForm.employee_entry"
                value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-form-item>
          <el-form-item label="在职状态" prop="employee_status">
            <el-select v-model.number="ruleForm.employee_status" placeholder="选择在职状态" style="width: 100%;">
              <el-option label="在职" :value="1"></el-option>
              <el-option label="离职" :value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="操作等级" prop="employee_level">
            <el-select v-model.number="ruleForm.employee_level" placeholder="选择操作等级" style="width: 100%;">
              <el-option label="收营员" :value="1"></el-option>
              <el-option label="管理员" :value="99"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="锁定状态" prop="employee_lock">
            <el-select v-model.number="ruleForm.employee_lock" placeholder="选择锁定状态" style="width: 100%;">
              <el-option label="锁定" :value="1"></el-option>
              <el-option label="解锁" :value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="上传照片">
            <div style="text-align: left;">
              <!-- element 上传图片组件 -->
              <el-button v-if="dialogFormButton == 0" plain disabled id="buttonUploadPhotos"></el-button>
              <el-upload v-else class="avatar-uploader" :action="''" :auto-upload="false" :show-file-list="false"
                :on-change="handleAvatarChangeIcon">
                <el-image v-if="imageUrl" style="width: 100px; height: 100px" :src="imageUrl" fit="fit" class="avatar">
                </el-image>
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>

              <!-- 上传图片可行 -->
              <!-- <template>
              <form
                action="http://192.168.137.33:8080/user/fileupload2"
                method="post"
                enctype="multipart/form-data"
              >
                选择文件：<input type="file" name="upload" /><br />
                <input type="submit" value="上传" />
              </form>
              </template> -->
              <!-- <el-button plain disabled id="buttonUploadPhotos"></el-button> -->
            </div>
          </el-form-item>
          <el-form-item>
            <el-button v-show="dialogFormButton == 1" style="width:100%" type="danger" @click="submitForm('ruleForm')">
              修改</el-button>
          </el-form-item>
          <el-form-item>
            <el-button v-show="dialogFormButton == 2" style="width:100%" type="primary" @click="submitForm('ruleForm')">
              添加</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  created: function () {
    // 数据接口接收或发送数据 首先，我把所有员工的详细信息拿到
    this.$axios({
      url: "/admin/check_employee",
    })
      .then((res) => {
        console.log(this.staffData);
        // console.log(res);
        if (res.data.code == 200) {
          this.staffData = res.data.data; // 把所有数据赋给staffData
          // 临时测试，不同行不同锁定状态，测试结果：可行
          // this.staffData[1].employee_lock=0;
          console.log("所有员工详细信息:", this.staffData); // 打印所有员工详细信息staffData
        }
      })
      .catch((error) => {
        console.log(error);
      });
  },
  data () {
    return {
      imageUrl: "",
      // 数据存储
      searchEmployeeNum: "", // 搜索输入的员工工号#整型
      showSearch: false, // 是否显示搜索框

      bodyChange: 1, // 主体切换，员工列表为1，搜索结果为0

      index: 0, // 点击的哪一行
      staffData: [], // 员工所有数据
      // total: 100, // 一共多少条数据
      pageSize: 5, // 一页显示多少条数据
      currentPage: 1, // 当前页
      dialogFormVisibleEdit: false, // 对话框，默认不显示

      dialogFormTitle: "", // 表单标题
      dialogFormButton: 1, // 切换/隐藏操作按钮，隐藏为0，修改为1，添加为2
      formStatus: false, // 弹窗表单状态，控制组件是否可用，添加和修改时可用，查看时不可用
      uploadDisabled: false, // 上传图片状态，添加和修改时可用，查看时不可用
      employeeNumStatus: false, // 员工工号状态，添加时可用，修改时不可用，默认false可用

      // 表单数据，修改/查看/添加用同一个表单       Form模板
      // ruleForm为临时表单，添加时清空给默认值，添加完给前端staffData和后端数据
      // 修改时根据index用row给ruleForm赋值做类型转换，修改完给前端staffData和后端数据
      // 查看时根据index用row给ruleForm赋值做类型转换并锁定
      // 查询时根据工号请求后端得到数据给ruleForm赋值做类型转换，查询到数据也可更改，更改完给前端staffData和后端数据
      ruleForm: {},
      rules: {
        employee_name: [
          { required: true, message: "请输入员工姓名", trigger: "blur" },
        ],
        employee_num: [
          { required: true, message: "请输入员工工号", trigger: "blur" },
        ],
        employee_pwd: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 3,
            max: 12,
            message: "长度在 3 到 12 个字符",
            trigger: "blur",
          },
        ],
        employee_tel: [
          { required: true, message: "请输入员工电话", trigger: "blur" },
        ],
        employee_idcard: [
          { required: true, message: "请输入身份证", trigger: "blur" },
          { min: 18, max: 18, message: "长度为 18 个字符", trigger: "blur" },
        ],
        employee_rfid: [
          { required: true, message: "请输入RFID卡号", trigger: "blur" },
          {
            min: 16,
            max: 24,
            message: "长度在 16 到 24 个字符",
            trigger: "blur",
          },
        ],
        employee_sex: [
          { required: true, message: "请选择性别", trigger: "change" },
        ],
        employee_birth: [
          {
            required: true,
            message: "请选择出生日期",
            trigger: "change",
          },
        ],
        employee_entry: [
          {
            required: true,
            message: "请选择入职日期",
            trigger: "change",
          },
        ],
        employee_status: [
          { required: true, message: "请选择在职状态", trigger: "change" },
        ],
        employee_level: [
          { required: true, message: "请选择操作等级", trigger: "change" },
        ],
        employee_lock: [
          { required: true, message: "请选择锁定状态", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    // 数据处理-函数
    selectTotal () {
      // 查看员工按钮，form表单显示所有员工基本信息
      this.bodyChange = 1;
      this.showSearch = false;
    },
    add () {
      // 添加员工按钮，对话框+表单添加员工详细信息
      this.dialogFormTitle = "添加员工信息";
      this.dialogFormButton = 2; // 添加按钮显示
      this.formStatus = false; // 表单可更改
      this.uploadDisabled = false;
      this.employeeNumStatus = false; // 员工工号可更改
      this.dialogFormVisibleEdit = true;
      this.ruleForm = {
        // 添加员工时初始化为空，选项为默认值
        employee_birth: "1980-10-10",
        employee_entry: "1980-10-10",
        employee_idcard: "",
        employee_level: 1,
        employee_lock: 1,
        employee_name: "",
        employee_num: null,
        employee_pwd: "",
        employee_rfid: "",
        employee_sex: 1,
        employee_status: 1,
        employee_tel: null,
      };
    },
    clickSearchButton () {
      this.showSearch = true;
      this.bodyChange = 2; // 主体不显示任何界面
    },
    select () {
      // 数据接口接收或发送数据 搜索员工按钮，根据员工号向后端请求获取该员工的基本信息
      //  先做表单验证
      console.log(this.searchEmployeeNum);
      if (this.searchEmployeeNum == "") {
        this.$message({
          message: "员工工号不能为空",
          type: "warning",
        });
      } else if (!Number.isInteger(this.searchEmployeeNum)) {
        this.$message({
          message: "员工工号只能为数字",
          type: "warning",
        });
      } else {
        this.$axios({
          url: "/admin/search_employee",
          method: "get",
          params: {
            employee_num: this.searchEmployeeNum,
          },
        }).then((res) => {
          if (res.data.code == 200) {
            this.ruleForm = res.data.data; // 获取搜索到的员工信息并保存到ruleForm中
            this.bodyChange = 0; // 搜索成功再显示搜索表单和渲染
            this.searchEmployeeNum = ""; // 搜索成功后清空输入框
          } else {
            // 失败不清空并弹窗提醒未搜索到结果
            this.$message({
              message: "未找到该员工信息!",
              type: "error",
            });
          }
          console.log(res);
          console.log("发送请求后：", this.searchEmployeeNum);
        });
      }
    },

    // 员工列表操作
    handleEdit (index, row) {
      // 修改员工信息，根据当前行赋值并弹出对话框
      this.index = index; // 保存下点击修改的哪一行
      this.dialogFormTitle = "修改员工信息";
      this.dialogFormButton = 1; // 修改按钮显示
      this.formStatus = false; // 表单可更改
      this.uploadDisabled = false;
      this.employeeNumStatus = true; // 员工工号不可更改
      this.dialogFormVisibleEdit = true;
      this.ruleForm = row; // 拿到的row数据赋给临时表单ruleForm
    },
    handleSelet (index, row) {
      this.dialogFormTitle = "查看员工信息";
      this.dialogFormButton = 0; // 按钮不显示
      this.formStatus = true; // 表单不可更改
      this.uploadDisabled = true;
      this.dialogFormVisibleEdit = true;
      this.ruleForm = row; // 拿到的row数据赋给临时表单ruleForm
    },
    handleLock (index, row) {
      // 现在通过下标直接改staffData里的employee_lock
      console.log(index, row); // 锁定操作了哪一行
      console.log("更改状态前：", this.staffData[index].employee_lock);
      if (this.staffData[index].employee_lock == 1) {
        // 拿到的staffData总数据需要改，前端显示
        this.staffData[index].employee_lock = 0;
      } else {
        this.staffData[index].employee_lock = 1;
      }
      console.log("更改状态后：", this.staffData[index].employee_lock);
      // 数据接口接收或发送数据 前端显示修改之后，锁定传回后端
      this.$axios({
        url: "/admin/updateEmpStatus",
        method: "get",
        params: {
          employee_num: this.staffData[index].employee_num,
          employee_lock: this.staffData[index].employee_lock,
        },
      }).then((res) => {
        console.log(res);
        console.log("发送请求后：", this.staffData[index].employee_lock);
      });
    },

    pageChange (currentPage) {
      // 改变页码
      console.log(currentPage);
      this.currentPage = currentPage;
    },

    //      Form模板
    submitForm (formName) {
      // 修改完成后验证并保存修改到前端和后端
      // this.dialogFormVisibleEdit = false;
      console.log(this.$refs[formName]);
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.dialogFormButton == 1) {
            this.$confirm("此操作将修改员工信息, 是否继续?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            })
              .then(() => {
                // 这里修改staffData里的数据，向后端发起修改请求
                // 数据接口接收或发送数据 然后，我修改一条数据传回这一条数据并修改前端的数据
                // params 修改的数据放在了ruleForm里，可直接传给后端
                console.log(this.ruleForm);
                this.$axios({
                  url: "/admin/alter_employee",
                  method: "post",
                  data: this.ruleForm,
                })
                  .then((res) => {
                    console.log(res);
                    console.log("修改数据:", this.ruleForm);
                    if (res.data.code == 200) {
                      // 数据成功传给后端，提示修改成功和前端数据修改
                      this.staffData[this.index] = this.ruleForm; // 前端数据修改
                      this.$message({
                        type: "success",
                        message: "修改成功!",
                      });
                      this.dialogFormVisibleEdit = false; // 修改成功关闭对话框
                    } else {
                      this.$message({
                        type: "error",
                        message: "修改失败!",
                      });
                    }
                  })
                  .catch((error) => {
                    console.log(error);
                  });
              })
              .catch(() => {
                this.$message({
                  type: "info",
                  message: "已取消修改",
                });
              });
          } else if (this.dialogFormButton == 2) {
            this.$confirm("此操作将添加员工信息, 是否继续?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            })
              .then(() => {
                // 这里添加数据，push到staffData中，向后端发起添加请求
                console.log("添加的数据:", this.ruleForm);
                this.$axios({
                  url: "/admin/add_employee",
                  method: "post",
                  data: this.ruleForm,
                })
                  .then((res) => {
                    console.log(res);
                    if (res.data.code == 200) {
                      // 数据成功传给后端，提示添加成功和前端数据添加
                      this.staffData.push(this.ruleForm); // 前端数据添加
                      this.$message({
                        type: "success",
                        message: "添加成功!",
                      });
                      this.dialogFormVisibleEdit = false; // 添加成功关闭对话框
                    } else {
                      this.$message({
                        type: "error",
                        message: "添加失败!",
                      });
                    }
                  })
                  .catch((error) => {
                    console.log(error);
                  });
              })
              .catch(() => {
                this.$message({
                  type: "info",
                  message: "已取消添加",
                });
              });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // submitSearchForm搜索表单提交
    submitSearchForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm("此操作将修改员工信息, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              // 数据提交成功了才弹窗修改成功，否则弹窗修改失败
              this.$axios({
                url: "/admin/alter_employee",
                method: "post",
                data: this.ruleForm,
              })
                .then((res) => {
                  console.log(res);
                  console.log("修改数据:", this.ruleForm);
                  if (res.data.code == 200) {
                    // 数据成功传给后端，提示修改成功和前端数据修改
                    // 前端数据修改 没有下标，只能通过工号循环遍历改变
                    for (let i = 0; i < this.staffData.length; i++) {
                      if (
                        this.staffData[i].employee_num ==
                        this.ruleForm.employee_num
                      ) {
                        console.log("前端数据修改前", this.tableData[i]);
                        this.tableData[i] = this.ruleForm;
                        console.log("前端数据修改后", this.tableData[i]);
                        break;
                      }
                    }
                    this.$message({
                      type: "success",
                      message: "修改成功!",
                    });
                  } else {
                    this.$message({
                      type: "error",
                      message: "修改失败!",
                    });
                  }
                })
                .catch((error) => {
                  console.log(error);
                });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消修改",
              });
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    searchFormLockStatus () {
      // 搜索表单切换锁定状态
      // 锁定状态，需要拿到工号做标识，没有下标，只能通过工号循环遍历改变

      // 修改ruleForm中的employee_lock作用于搜索表单的锁定/解锁切换
      if (this.ruleForm.employee_lock == 1) {
        // 拿到的staffData总数据需要改，前端显示
        this.ruleForm.employee_lock = 0;
      } else {
        this.ruleForm.employee_lock = 1;
      }
      // 用员工工号修改staffData中对应的employee_lock作用于员工列表的锁定/解锁切换
      for (let i = 0; i < this.staffData.length; i++) {
        if (this.staffData[i].employee_num == this.ruleForm.employee_num) {
          this.staffData[i].employee_lock = this.ruleForm.employee_lock;
          break;
        }
      }
      // 数据接口接收或发送数据 向后端传回锁定状态
      this.$axios({
        url: "/admin/updateEmpStatus",
        method: "get",
        params: {
          employee_num: this.ruleForm.employee_num,
          employee_lock: this.ruleForm.employee_lock,
        },
      }).then((res) => {
        console.log(res);
        console.log("搜索表单锁定请求后：", this.ruleForm.employee_lock);
      });
    },
    // 上传员工图片 element 上传图片组件
    handleAvatarChangeIcon (file, fileList) {
      //选中文件触发的change事件
      // console.log(file)
      const isJPG = file.raw.type === "image/jpeg";
      const isPNG = file.raw.type === "image/png";
      // const isLt2M = file.raw.size / 1024 / 1024 < 0.5  //限制上传文件的大小
      if (!isPNG && !isJPG) {
        this.$message.error("上传图片只能是 JPG/PNG 格式!");
        return false;
      } else {
        this.imageUrl = URL.createObjectURL(file.raw); //赋值图片的url，用于图片回显功能
        //文件上传操作
        let formData = new FormData();
        formData.append("file", file.raw);
        // 图片上传功能
        // this.$axios
        //   .post("http://192.168.137.33:8080/user/fileupload2", formData, {
        //     headers: { "Content-Type": "multipart/form-data" },
        //   })
        //   .then((res) => {
        //     if (res.code == "200") {
        //       console.log("图片上传成功");
        //     }
        //   });
      }
    },
  },
  computed: {
    // 数据计算
    tableData: function () {
      // 实时计算当前页码显示的数据，渲染到列表中
      return this.staffData == null
        ? null
        : this.staffData.slice(
          (this.currentPage - 1) * this.pageSize,
          this.currentPage * this.pageSize
        );
    },
    total: function () {
      // 计算一共多少条数据
      return this.staffData == null ? null : this.staffData.length;
    },
  },
};
</script>
<style>
#radioSex .el-form-item__content .el-radio-group {
  font-size: 0;
  text-align: left;
}
#buttonUploadPhotos {
  width: 100px;
  height: 100px;
  border-radius: 0px;
}
#dividerDialog {
  height: 2px;
  width: 90%;
  margin: 12px 38px;
  background: #434446;
}
/* dialog对话框动画 */
.dialog-fade-enter-active .el-dialog.way {
  animation: anim-open 0.3s;
}
.dialog-fade-leave-active .el-dialog.way {
  animation: anim-close 0.3s;
}
@keyframes anim-open {
  0% {
    transform: translate3d(0, 100%, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes anim-close {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 0;
  }
}
/* 上传员工图片样式 element 上传图片组件 */
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
/* .avatar-uploader .el-upload:hover {
  border-color: #409eff;
} */
.avatar-uploader-icon {
  font-size: 40px;
  color: #8c939d;
  width: 100px;
  height: 70px;
  padding-top: 30px;
  font-weight: 100;
  /* line-height: 10px; */
  /* text-align: center; */
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>
